<template>
  <div class="app-container">
    <el-row>
      <el-col :span="4">
        <strong style="font-size: 20px;">
          底薪设置
        </strong>
      </el-col>
      <el-col :span="20" align="right">
        <span style="margin-right: .5em">
          <el-switch
            v-model="search.isSet"
            inactive-text="已设置"
            size="medium"
            @change=" filterGenerate();dataProcessor()"
          />
        </span>
        <span style="margin-right: .5em">
          <el-switch
            v-model="search.status"
            inactive-text="是否离职"
            size="medium"
            @change=" filterGenerate();dataProcessor()"
          />
        </span>
        <span style="margin-right: .5em">
          <el-input
            v-model="search.staff"
            placeholder="员工名称"
            style="width: 150px;"
            size="medium"
            clearable
          />
        </span>

        <el-button
          size="medium"
          icon="el-icon-search"
          style="margin-right: 1em"
          circle
          @click="filterGenerate();dataProcessor()"
        />
      </el-col>
    </el-row>

    <el-row>
      <el-table
        v-loading="loading"
        :data="list"
        element-loading-text="加载中..."
        fit
        lazy
        stripe
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column label="#" type="index" />
        <el-table-column prop="name" label="员工" />
        <el-table-column prop="phone" label="电话" />
        <el-table-column label="日薪">
          <template scope="scope">
            <el-input
              v-model="scope.row.dailyWage"
              style="width: 180px;"
              size="medium"
              type="number"
              @blur="chooseStaff(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="是否在职">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.enabled"
              active-color="#67C23A"
              inactive-color="#F56C6C"
              size="medium"
              @change=" changeStatus(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <el-row>
      <div class="block">
        <el-pagination
          :current-page.sync="pager.page"
          :page-sizes="[20, 50, 100, 300]"
          :page-size="pager.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paginator ? paginator.totalCount : 0"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-row>

    <el-dialog
      title="确认修改"
      :visible.sync="dialog.visible"
      width="40%"
      :before-close="dialogClose"
    >
      <div v-if="dialog.pk" style="padding-bottom:10px;font-size:16px">
        <span>员工:{{ dialog.pk.name }}</span>
        <span style="padding-left:10px;">电话:{{ dialog.pk.phone }}</span>
        <span style="padding-left:10px;">日薪:{{ dialog.pk.dailyWage }}</span>
      </div>
      <!-- <span>
        <el-input
          v-model="dialog.check"
          size="medium"
          placeholder="请输入员工手机后4位验证"
        />
      </span> -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClose">取消</el-button>
        <el-button type="primary" @click="submit">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      store: 0,
      paginator: [],
      pager: {
        page: 1,
        limit: 20
      },
      loading: false,

      search: {
        staff: null,
        status: null,
        isSet: false
      },
      dialog: {
        visible: false,
        pk: null,
        check: null
      }
    }
  },
  created() {
    const store = localStorage.getItem('storeId')
    if (store > 0) {
      this.store = store
      this.filterGenerate()
      this.dataProcessor()
    } else {
      this.$message.error('无效storeId，请退出重试')
    }
  },
  methods: {
    dialogClose() {
      this.dataProcessor()
      this.dialog.visible = false
    },
    changeStatus(row) {
      if (this.store > 0) {
        this.axios.put(`/store/${this.store}/staffs/${row.id}`, { enabled: row.enabled })
          .then(res => {
            this.$message.success('修改成功')
          })
          .finally(() => {
            this.dataProcessor()
          })
      }
    },
    chooseStaff(row) {
      if (row.dailyWage > 0) {
        this.dialog.pk = row
        this.dialog.check = null
        this.dialog.visible = true
      } else {
        this.$message.error('请填写正确日薪')
        this.dataProcessor()
      }
    },
    submit() {
      const dialog = this.dialog
      // const phoneString = dialog.pk.phone.slice(-4)
      // if (phoneString !== dialog.check) {
      //   this.$message.error('请填写正确验证信息')
      //   return
      // }
      if (this.store > 0) {
        this.axios.put(`/store/${this.store}/staffs/${dialog.pk.id}`, { dailyWage: dialog.pk.dailyWage })
          .then(res => {
            this.$message.success('修改成功')
            this.dialog.visible = false
          })
          .catch(() => {
            this.dataProcessor()
          })
      }
    },
    filterGenerate() {
      this.filter = {
        '@display': `{
              'id': 'entity.getId()',
              'name': 'entity.getName()',
              'phone': 'entity.getPhone()',
              'dailyWage': 'entity.getDailyWage()',
              'enabled': 'entity.getEnabled()'
          }`
      }

      if (this.search.status) {
        const expression = `entity.getEnabled() == false`
        if (this.filter['@filter']) {
          this.filter['@filter'] += ` && (${expression})`
        } else {
          this.filter['@filter'] = `(${expression})`
        }
      } else {
        const expression = `entity.getEnabled() == true`
        if (this.filter['@filter']) {
          this.filter['@filter'] += ` && (${expression})`
        } else {
          this.filter['@filter'] = `(${expression})`
        }
      }
      if (this.search.isSet) {
        const expression = `entity.getDailyWage() > 0`
        if (this.filter['@filter']) {
          this.filter['@filter'] += ` && (${expression})`
        } else {
          this.filter['@filter'] = `(${expression})`
        }
      } else {
        const expression = `!(entity.getDailyWage() > 0)`
        if (this.filter['@filter']) {
          this.filter['@filter'] += ` && (${expression})`
        } else {
          this.filter['@filter'] = `(${expression})`
        }
      }
      if (this.search.staff) {
        const expression = `entity.getName() matches '${this.search.staff}'`
        if (this.filter['@filter']) {
          this.filter['@filter'] += ` && (${expression})`
        } else {
          this.filter['@filter'] = `(${expression})`
        }
      }
    },
    dataProcessor() {
      this.loading = true
      // table数据
      this.axios.get(`/store/${this.store}/staffs`, {
        params: Object.assign(
          {},
          this.filter,
          this.pager
        )
      }).then(res => {
        this.list = res.data
        this.loading = false
        this.paginator = res.paginator
      })
    },
    // Pager size changed
    handleSizeChange(val) {
      this.pager.limit = val
      this.dataProcessor()
    },

    // Pager page changed
    handleCurrentChange(val) {
      this.pager.page = val
      this.dataProcessor()
    }
  }
}
</script>
